<template>
  <div class="curGroups">
    <el-row>
      <el-col :span="8">
        <el-input v-model="wd" placeholder="群组名称"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" style="margin-left:10px;" @click="submitSearch">搜索</el-button>
      </el-col>
      <el-col :span="5" :push="8" style="text-align:right;">
        群组性质：
        <el-select v-model="groupType" @change="submitSearch">
          <el-option value="" label="所有的">所有的</el-option>
          <el-option value="2" label="静态群组">静态群组</el-option>
          <el-option value="1" label="动态群组">动态群组</el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-button @click="handleDel(selections)">批量删除群组</el-button>
    </el-row>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="groupList.list" stripe class="table" @selection-change="handleSelectChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" label="群组名称" className="is-center">
      </el-table-column>
      <el-table-column prop="customerNum" label="成员数量" className="is-center">
      </el-table-column>
      <el-table-column label="建群时间" className="is-center">
        <template slot-scope="scope">
          {{$date.format(scope.row.createTime, 'YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="群组类别" className="is-center">
        <template slot-scope="scope">
          <span v-if="scope.row.customerType===1">会员</span>
          <span v-else>意向客户</span>
        </template>
      </el-table-column>
      <el-table-column label="群组性质" className="is-center">
        <template slot-scope="scope">
          <span v-if="scope.row.groupType===1">动态</span>
          <span v-else>静态</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" className="is-center">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="$router.push({name: 'EditGroup', params: {gid: scope.row.id}})">编辑</el-button>
          <el-button size="small" type="text" @click="handleDel([scope.row.id])">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="sizes, total, prev, pager, next, jumper"
        :total="groupList.page.total"
        :page-sizes="[10, 30, 50, 100]"
        @current-change="submitSearch()"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        wd: '',
        groupType: null,
        size: 10,
        page: 1,
        tbLoading: true,
        selections: []
      }
    },
    mounted () {
      this.initPageData()
    },
    computed: {
      ...mapState({
        groupList: state => state.cusManage.groupList
      })
    },
    methods: {
      ...mapActions(['getCusGroups', 'deleteGroup']),
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD hh:mm:ss')
      },
      // 初始化页面数据
      initPageData () {
        this.submitSearch()
      },
      // 选择行
      handleSelectChange (selection) {
        this.selections = selection.map(item => item.id)
      },
      // 搜索群组
      submitSearch () {
        let wd = this.wd
        let type = this.groupType
        let size = this.size
        let page = this.page
        this.tbLoading = true
        this.getCusGroups({wd, status: 1, type, size, page})
          .then(() => {
            this.tbLoading = false
          })
      },
      // 改变分页大小
      handleSizeChange (size) {
        this.size = size
        this.submitSearch()
      },
      // 删除群组
      handleDel (ids) {
        if (ids.length > 0) {
          this.$confirm('是否确认删除？', '提示', {
            type: 'warning'
          }).then(() => {
            return this.deleteGroup(ids)
          }).then(res => {
            if (res.data.code === 1) {
              this.initPageData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$message({
            type: 'info',
            message: '请选择群组!'
          })
        }
      }
    }
  }
</script>
<style lang="scss">
  .curGroups{
    .el-row{margin-bottom:15px;}
  }
</style>
